<template>
  <div class="main" v-color="'bgkImg'">
    <dz-nav :is-back="true" back-url="/help">
      <template #center>
        <b v-color class="fontSize14">{{ form.title }}</b>
      </template>
    </dz-nav>
    <div class="box-1">
      <div class="box-content">
        <span v-html="renderedContent"></span>
      </div>

    </div>
    <dz-safe></dz-safe>
  </div>
</template>


<script>
import {getTutorialCenter} from "@/api/apiFox";

export default {
  data(){
    return{
      list:[],
      form:{},
      content:''
    }
  },
  computed: {
    renderedContent() {
      return this.content.replace(/<img(.*?)src="(.*?)"(.*?)>/g, (match, p1, p2, p3) => {
        return `<img${p1}src="${p2}" style="width: 100% !important;border-radius:15px">`;
      });
    }
  },
  methods:{
    getList(item){
      getTutorialCenter().then(res=>{
        this.list = res
       let form = res.filter(value =>{ return parseInt(item) === value.id})
        this.form =form[0]
        this.content = form[0].textContent
      }).catch(err=>{})
    },
    getHelp(item){

    }
  },
  mounted() {
    this.getList(this.$route.query.id)
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  min-height: 100vh;
  .box-1{
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    .box-content{
      border-radius: 10px;
      width: 100%;
      min-height: 100px;
      background: #fff;
      padding: 16px;
      box-sizing: border-box;
      font-size: 12px;
      line-height: 20px;
    }
    .bottom{
      width: 100%;
      margin-top: 20px;
    }
  }
}
</style>